<script setup lang="ts">
import type { RecommendCate } from '@/types/Recommend'
const props = defineProps<{
  // 向父控件暴露cate,类型是RecommendCate
  cate:RecommendCate 
}>()

</script>

<template>
  <div class="content">
    <div class="image" :style="{ backgroundImage: 'url(' + props.cate.imgPath + ')' }" />
    <div class="title">
      {{ props.cate?.cateStr }}
    </div>
  </div>
</template>

<style lang="scss" scoped>

.content {
  width: 47%;
  height: 30vh;
}
.image {
  width: 100%;
  height: 70%;
  background-color: aqua;
  border-radius: 2vw;
  //background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F23%2F20210523112011_249a0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708757368&t=4028335210750e147477e459c1086750');
  background-size: cover;
}

.title {
  margin-top: 2vw;
  margin-bottom: 2vw;
  font-size: 4vw;
  color: white;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal; /* 使文本按照正常换行显示 */
  line-clamp: 2; /* 控制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 12vw; /* 控制最大高度，根据实际需求调整 */
}
</style>